<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>用户管理</title>
	<meta name="decorator" content="default"/>
	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
	<link rel="stylesheet" href="${ctxStatic}/bootstrap-table/bootstrap-table.css">
	<style type="text/css">
		.ztree {overflow:auto;margin:0;_margin-top:10px;padding:10px 0 0 10px;}
        .pagination-info {display: none}
        .fixed-table-pagination div.pagination, .fixed-table-pagination .pagination-detail {margin-bottom: 0px; margin-top: 0px;}
        .pull-right{margin-bottom: 1px; margin-top: 1px;}
        .table-condensed th, .table-condensed td{
            padding-bottom:0px;
            padding-top: 1px;
        }
	</style>
</head>
<body>
	<sys:message content="${message}"/>
	<div id="content" class="row-fluid">
		<div id="left" class="accordion-group">
			<div class="accordion-heading">
		    	<a class="accordion-toggle">组织机构<i class="icon-refresh pull-right" onclick="refreshTree();"></i></a>
		    </div>
			<div id="ztree" class="ztree"></div>
		</div>
		<div id="openClose" class="close">&nbsp;</div>
		<div id="right" style="overflow: auto;">
			<form id="searchForm" action="${ctx}/customer/potentialCustomer/userAjaxData" class="breadcrumb form-search">
				<input type="hidden" id="officeId" name="office.id"/>
				<input name="name" type="text" maxlength="50" class="input-mini" placeholder="请输入姓名"/>
				<input name="no" type="text" maxlength="50" class="input-mini" placeholder="请输入工号"/>
				<input name="loginName" type="text" maxlength="50" class="input-mini" placeholder="请输入账户"/>
				<input id="btnSubmit"  class="btn btn-primary btn-small" type="button" value="查询" onclick=" refreshUserTable();"/>
			</form>
			<table id="userTable" data-url="${ctx}/customer/potentialCustomer/userAjaxData">
				<thead>
					<tr>
						<th data-field="state" data-checkbox="true" data-align="center"></th>
                        <%--<th data-align="left" data-formatter="userInfoFormat" >名称[账号][工号][机构]</th>--%>
						<th data-field="name"  data-align="left" >姓名</th>
						<th data-field="loginName" data-align="left" >账号</th>
						<th data-field="no" data-align="left" >工号</th>
						<th data-field="office" data-align="left" data-formatter="officeNameFormatter" >部门</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<script src="${ctxStatic}/bootstrap-table/bootstrap-table.js"></script>
    <script src="${ctxStatic}/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/bootstrap-table/config.js"></script>
	<script type="text/javascript">
	 	$(document).ready(function() {
			//初始化表格
	        $("#userTable").bootstrapTable($.fn.BTConfigSimple({
	        	pageSize: 10,
	        	pageList: [10, 20, 30, 50]
	        }));
	 	});

        /*function userInfoFormat(v,r,i){
            return r.name + "[" + r.loginName+"]["+ r.no+"]["+ r.office.name+"]";
        }*/

	 	function officeNameFormatter(value, row, index){
	 		return value.name;
	 	}
	 	
		var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
			callback:{onClick:function(event, treeId, treeNode){
					var id = treeNode.id == '0' ? '' :treeNode.id;
					$("#officeId").val(id);
					refreshUserTable();
				}
			}
		};
		//筛选用户
		function refreshUserTable(){
			$("#userTable").bootstrapTable('refresh',$('#searchForm').refreshByForm());
		}
		
		function refreshTree(){
			$.getJSON("${ctx}/sys/office/treeData",function(data){
				$.fn.zTree.init($("#ztree"), setting, data).expandAll(false);
			});
		}
		refreshTree();
		 
		var leftWidth = 180; // 左侧窗口大小
		var htmlObj = $("html"), mainObj = $("#main");
		var frameObj = $("#left, #openClose, #right, #right iframe");
		function wSize(){
			var strs = getWindowSize().toString().split(",");
			htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
			mainObj.css("width","auto");
			frameObj.height(strs[0] - 5);
			var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
			$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
			$(".ztree").width(leftWidth - 10);//.height(frameObj.height() - 46);
		}
		//选择的用户
		function selectUser() {
            var ids = $.map($("#userTable").bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            return ids;
	    }
		//选择用户名
		function selectUserName() {
            var names = $.map($("#userTable").bootstrapTable('getSelections'), function (row) {
                return row.name;
            });
            return names;
	    }
	</script>
	<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>